/* body {
  width: 100%;
  height: 100%;
  margin: 0 auto;
} */

.repayRoot {
  width: 100%;
  display: flex;
  height: 100vh;
  overflow: hidden;
  margin: 0 auto;
  box-sizing: border-box;
  background-color: #f7f7f7;
  flex-direction: column;
}

.repayContent {
  display: flex;
  width: 100%;
  flex: 1;
  padding: 0px 10px;
  overflow: hidden;
  box-sizing: border-box;
  flex-direction: column;
  align-items: flex-start;
  align-content: flex-start;
  justify-content: flex-start;
  color: red;
}

.repayContentScroll {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-content: flex-start;
  justify-content: flex-start;

  width: 100%;
  height: 100%;
  overflow: auto;
}

.repayItemList {
  display: flex;
  width: 100%;
  box-sizing: border-box;
  padding: 10px 10px;
  border-radius: 10px;
  margin-top: 16px;
  margin-left: 0px;
  margin-right: 0px;
  background-color: white;
  flex-direction: column;
  align-items: flex-start;
  align-content: flex-start;
  justify-content: flex-start;
  color: black;
}

.repayPlan {
  display: flex;
  width: 100%;
  box-sizing: border-box;
  border-radius: 10px;
  margin-top: 16px;
  margin-left: 0px;
  margin-right: 0px;
  background-color: white;
  flex-direction: column;
  align-items: flex-start;
  align-content: flex-start;
  justify-content: flex-start;
  color: white;
}

.repayPlanHeader {
  display: flex;
  width: 100%;
  padding: 10px 10px 20px 10px;
  box-sizing: border-box;
  /* background-color: #1F46C7; */
  background-image: linear-gradient(to right, #56BCF9, #56BCF9);
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  color: black;
  flex-direction: column;
  align-items: flex-start;
  align-content: flex-start;
  justify-content: flex-start;
}

.repayPlanHeaderContent {
  display: flex;
  width: 100%;
  box-sizing: border-box;
  padding: 10px 10px;
  color: white;
  align-items: center;
  justify-content: flex-start;
}

.repayPlanHeaderIcon {
  width: 16px;
  height: 16px;
}

.repayRolloverIcon {
  width: 20px;
  margin: 0px 10px;
}

.repayItemHeaderTitle {
  color: black;
  margin-left: 12px;
  text-align: left;
  font-size: 20px;
  font-weight: bold;
}

.repayItemHeaderTips {
  color: black;
  margin: 0px 10px;
  text-align: left;
  font-size: 14px;
}


.repayItemTitle {
  color: black;
  margin: 0px 6px;
  text-align: left;
  font-size: 22px;
}

.repayRolloverTitle {
  color: #999999;
  margin: 0px 6px;
  text-align: left;
  font-size: 14px;
}

.repayItemSelectorContent {
  width: 100%;
  box-sizing: border-box;
  margin-top: 6px;
  background-color: white;
}

.repayItemSelector {
  margin: 10px 10px;
}

.repayItemBillContent {
  display: flex;
  width: 100%;
  padding: 0px 6px;
  min-height: 40px;
  justify-content: flex-start;
  align-items: center;
  box-sizing: border-box;
  background-color: white;
}

.repayItemBillHeaderTitle {
  color: black;
  flex: 1;
  box-sizing: border-box;
  text-align: left;
  font-size: 14px;
  font-weight: bold;
}

.repayItemBillHeaderAmount {
  text-align: left;
  font-size: 16px;
  color: #3EC1B7;
  font-weight: bold;
}

.repayItemBillItemTitle {
  color: #A7A7A7;
  flex: 1;
  box-sizing: border-box;
  text-align: left;
  font-size: 12px;
}

.repayItemBillItemAmount {
  color: black;
  text-align: left;
  font-size: 14px;
  font-weight: bold;
}

.repayItemBillCurrency {
  color: #A7A7A7;
  margin-left: 6px;
  font-size: 14px;
}

.repayBottom {
  display: flex;
  width: 100%;
  height: 76px;
  padding: 0px 10px;
  box-sizing: border-box;
  margin-top: 10px;
  align-items: center;
  background-color: white;
  justify-content: center;
}

.repayBottomAmountContent {
  display: flex;
  flex: 1;
  padding: 0px 10px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.repayBottomAmountTitle {
  font-size: 12px;
  color: #999999;
  text-align: left;
}

.repayBottomAmount {
  font-size: 18px;
  margin-top: 6px;
  color: black;
  text-align: left;
  font-weight: bold;
}

.repayApplyBtn {
  display: flex;
  width: 110px;
  height: 44px;
  border-radius: 22px;
  text-align: center;
  align-items: center;
  justify-content: center;
  border: none;
  color: black;
  font-weight: bolder;
  font-size: 16px;
  background-image: linear-gradient(to right, #56BCF9, #56BCF9);
}

.overlayContentBc {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 150px;
  height: 150px;
  margin-top: -75px;
  margin-left: -75px;
  background: white;
  border-radius: 16px;
}

.overlayContent {
  position: absolute;
  /* top: 50%;
  left: 50%; */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 150px;
  height: 150px;
  /* margin-top: -75px;
  margin-left: -75px; */
  background-color: white;
  border-radius: 16px;
}

.repayRowLine {
  width: 100%;
  height: 10px;
  margin-top: 16px;
  border-top: 1px dashed #F3F3F4;
}

.repayTopEdge{
  width: inherit;
  height: 10px;
  background-color: white;
}
